<template>
  <div id="jobRecruitment" class="person-detail">
    <div>
      <van-nav-bar title="求职招聘" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div>
      <div class="skillsTraining-search">
        <van-dropdown-menu>
          <van-dropdown-item :title="chooseCity.text" ref="item1">
            <van-tree-select :items="items" :main-active-index.sync="activeIndex" :active-id.sync="activeId"
              @click-nav="clickNav" @click-item="clickItem">
            </van-tree-select>
          </van-dropdown-item>
        </van-dropdown-menu>
        <van-search placeholder="请输入搜索关键词" v-model="value" @input="searchList()" />
      </div>
      <div>
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" @change="chooseDate" />
          <van-dropdown-item title="工作地点" ref="item2">
            <van-tree-select :items="items2" :main-active-index.sync="activeIndex" :active-id.sync="activeId"
              @click-nav="clickNav1" @click-item="clickItem1">
            </van-tree-select>
          </van-dropdown-item>
          <van-dropdown-item title="更多" ref="item3">
            <div v-for="(item, index) in lists" :key="index">
              <p class="more-body">
                {{ item.name }}
              </p>
              <div class="communityDoctor-grid">
                <p v-for="(value, index1) in item.list" :key="index1" @click="chooseTag(index, index1)"
                  :class="{ red: value.isCheck }" class="communityDoctor-details">
                  {{ value.label }}
                </p>
              </div>
            </div>
            <div class="communityDoctor-details-button">
              <van-button type="default" @click="clear()">清除</van-button>
              <van-button type="primary" @click="confirmTags()">确定</van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <div>
        <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="item in jobs" :key="item.id" class="employmentTraining-training-job" @click="goDetails(item)">
              <p>
                <span class="employmentTraining-training-jobName">{{
                item.subject
              }}</span>
                <span class="employmentTraining-training-salary">{{
                item.salaryName
              }}</span>
              </p>
              <p class="employmentTraining-training-company">
                {{ item.companyName }}
              </p>
              <p class="employmentTraining-training-address">
                <span>{{ item.address }}</span>
                <span>{{ item.degreeNeedName }}</span>
                <span>{{ item.experienceNeedName }}</span>
              </p>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "jobRecruitment",
    components: {},
    data() {
      return {
        loading: false,
        finished: false,
        isLoading: false,
        count1: 1,
        activeIndex: 0,
        activeId: 1,
        chooseCity: {
          text: "西安",
          id: "610100"
        },
        chooseCity1: {
          text: "",
          id: " "
        },
        items: [],
        items2: [{
          text: '不限',
          id: " ",
          children: [{
            text: '不限',
            id: " ",
          }]
        }],
        value: "",
        value1: " ",
        value2: "a",
        value3: "a1",
        option1: [{
            text: "最新",
            value: " "
          },
          {
            text: "本周",
            value: 1
          },
          {
            text: "本月",
            value: 2
          }
        ],
        option2: [{
            text: "工作地点",
            value: "a"
          },
          {
            text: "最近一个月",
            value: "b"
          },
          {
            text: "最近半年",
            value: "c"
          }
        ],
        option3: [{
            text: "工作地点",
            value: "a1"
          },
          {
            text: "最近一个月",
            value: "b1"
          },
          {
            text: "最近半年",
            value: "c1"
          }
        ],
        jobs: [],
        lists: []
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getCityInfo();
      this.getAddressInfo(this.chooseCity);
      this.getTagList();
    },
    methods: {
      onLoad() {
        this.getInfo();
      },
      //行业标签
      getTagList() {
        mine.training_position_getSelectList().then(res => {
          if (res.code == "0") {
            if (res.datas != null) {
              if (res.datas.length > 0) {
                let arr = res.datas,
                  len = arr.length;
                for (let i = 0; i < len; i++) {
                  if (i == 0) {
                    let obj = [{
                      id: null,
                      isCheck: false,
                      label: "不限"
                    }];
                    arr[i].list = obj.concat(arr[i].list);
                  } else {
                    let obj = [{
                      id: null,
                      isCheck: false,
                      label: "全部"
                    }];
                    arr[i].list = obj.concat(arr[i].list);
                  }
                }
                this.lists = arr;
              }
            }
          }
        });
      },
      chooseDate() {
        this.jobs = []
        this.count1 = 1
        this.getInfo();
      },
      //
      confirmTags() {
        this.jobs = []
        this.count1 = 1
        this.getInfo();
        this.$refs.item3.toggle();
      },
      //搜索页面数据list
      searchList() {
        this.jobs = []
        this.count1 = 1
        this.getInfo();
      },
      clear() {
        this.lists.forEach(item => {
          item.list.forEach(item1 => {
            item1.isCheck = false;
          });
        });
      },
      chooseTag(val1, val2) {
        this.lists[val1].list[val2].isCheck = !this.lists[val1].list[val2]
          .isCheck;
        this.lists[val1].list.forEach((item, index) => {
          if (val2 != index) {
            item.isCheck = false;
          }
        });
      },
      onRefresh() {
        this.jobs = []
        this.count1 = 1
        this.getInfo();
      },
      clickItem1(data) {
        this.chooseCity1 = data;
        this.getInfo()
        setTimeout(() => {
          this.$refs.item2.toggle();
        }, 500);
      },
      getAddressInfo(data) {
        let data1 = "parentCode=" + data.id,
          that = this;
        mine
          .region_v1_findList(data1)
          .then(res => {
            let arr = [{
              text: '不限',
              id: " ",
              children: [{
                text: '不限',
                id: " ",
              }]
            }];
            if (res.code == "0") {
              if (res.datas != null) {
                if (res.datas.length > 0) {
                  res.datas.forEach(item => {
                    let obj = {
                      text: item.regionName,
                      id: item.regionCode,
                      children: []
                    };
                    arr.push(obj);
                  });
                }
              }
            }
            that.items2 = arr;
            if (that.items2.length > 11) {
              let data2 = "parentCode=" + that.items2[1].id;
              return mine.region_v1_findList(data2);
            }
          })
          .then(res1 => {
            let arr = [];
            if (res1.code == "0") {
              if (res1.datas != null) {
                if (res1.datas.length > 0) {
                  res1.datas.forEach(item => {
                    let obj = {
                      text: item.regionName,
                      id: item.regionCode
                    };
                    arr.push(obj);
                  });
                }
              }
            }
            that.items2[1].children = arr;
          });
      },
      clickItem(data) {
        this.chooseCity = data;
        setTimeout(() => {
          this.$refs.item1.toggle();
        }, 500);
        this.getAddressInfo(data);
      },
      clickNav1(index) {
        if (index == 0) {
          return
        }
        let data = "parentCode=" + this.items2[index].id,
          that = this;
        mine.region_v1_findList(data).then(res => {
          let arr = [];
          if (res.code == "0") {
            if (res.datas != null) {
              if (res.datas.length > 0) {
                res.datas.forEach(item => {
                  let obj = {
                    text: item.regionName,
                    id: item.regionCode
                  };
                  arr.push(obj);
                });
              }
            }
          }
          that.items2[index].children = arr;
        });
      },
      clickNav(index) {
        let data = "parentCode=" + this.items[index].id,
          that = this;
        mine.region_v1_findList(data).then(res => {
          let arr = [];
          if (res.code == "0") {
            if (res.datas != null) {
              if (res.datas.length > 0) {
                res.datas.forEach(item => {
                  let obj = {
                    text: item.regionName,
                    id: item.regionCode,
                    children: []
                  };
                  arr.push(obj);
                });
              }
            }
          }
          that.items[index].children = arr;
        });
      },
      getCityInfo() {
        let that = this;

        mine
          .region_v1_findProviceList()
          .then(res => {
            if (res.code == "0") {
              if (res.datas != null) {
                if (res.datas.length > 0) {
                  res.datas.forEach(element => {
                    let obj = {
                      text: element.regionName,
                      id: element.regionCode,
                      children: []
                    };
                    that.items.push(obj);
                  });
                }
              }
            }
            if (that.items.length > 0) {
              let data = "parentCode=" + that.items[0].id;
              return mine.region_v1_findList(data);
            }
          })
          .then(res1 => {
            let arr = [];
            if (res1.code == "0") {
              if (res1.datas != null) {
                if (res1.datas.length > 0) {
                  res1.datas.forEach(item => {
                    let obj = {
                      text: item.regionName,
                      id: item.regionCode
                    };
                    arr.push(obj);
                  });
                }
              }
            }
            that.items[0].children = arr;
          });
      },
      getxueli(index) {
        let id = "";
        if (this.lists.length < 1) {
          return null
        }
        this.lists[index].list.forEach(item => {
          if (item.isCheck) {
            id = item.id;
          }
        });
        return id;
      },
      getInfo() {
        let data = {
          category: this.getxueli(4),
          companyName: '',
          date: this.value1,
          degreeNeed: this.getxueli(0),
          experienceNeed: this.getxueli(2),
          industryType: this.getxueli(5),
          positionCompanyName: this.value,
          positionType: this.getxueli(6),
          regionCode: this.chooseCity1.id,
          salary: this.getxueli(1),
          scale: this.getxueli(3),
          curPage: this.count1,
          pageSize: (this.count1) * 10
        };
        mine.training_position_page(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.jobs = [...this.jobs, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count1) * 10) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      back() {
        this.$router.go(-1);
      },
      goDetails(val) {
        this.$router.push({
          path: "/work/employmentTraining/jobDetails",
          query: {
            id: val.id
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  #jobRecruitment {
    background: #fff;

    .skillsTraining-search {
      padding-left: 20px;
      display: flex;

      .van-dropdown-menu__title {
        line-height: 55px;
      }

      .van-search {
        width: 80%;
        margin-left: 10px;
      }
    }

    div.van-ellipsis {
      font-size: 14px;
    }

    .employmentTraining-training-job {
      padding: 20px;
      border-bottom: 1px solid #ccc;

      >p {
        height: 30px;
        line-height: 30px;
      }
    }

    .employmentTraining-training-jobName {
      font-size: 16px;
      font-weight: bold;
    }

    .employmentTraining-training-salary {
      float: right;
      font-size: 14px;
      color: #dc4630;
    }

    .communityDoctor-grid {
      display: flex;
      flex-wrap: wrap;
      padding-left: 20px;
    }

    .communityDoctor-details {
      width: 18%;
      text-align: center;
      border: 0.5px solid #e2e2e2;
      margin-left: 10px;
      margin-bottom: 10px;
      width: 100px;
      height: 30px;
      line-height: 30px;
    }

    .communityDoctor-details-button {
      padding: 10px;
      display: flex;

      >.van-button {
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
      }

      >.van-button:nth-child(1) {
        width: 100px;
      }

      >.van-button:nth-child(2) {
        width: 200px;
        margin-left: 30px;
      }
    }

    .employmentTraining-training-address {
      >span {
        margin-left: 10px;
        padding: 3px;
        border-radius: 1px;
        background: #f5f5f5;
        margin-left: 10px;
        padding: 5px;
        border-radius: 1px;
        color: #888888;
      }

      >span:nth-child(1) {
        margin-left: 0;
      }
    }

    .van-tree-select__content {
      >button {
        width: 70px;
        margin: 5px 5px;
        height: 30px;
        line-height: 30px;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 4px;
        color: #333;
        cursor: pointer;
        font-size: 12px;
      }

      >button:hover {
        border: 1px solid #dc4630;
        color: #dc4630;
      }
    }

    .more-body {
      padding: 10px;
      font-size: 14px;
      font-weight: 700;
    }

    .van-grid-item__content {
      padding: 10px;
      background: #f5f5f5;
      font-size: 14px;
    }

    .red {
      background: #dc4630;
      border-color: #dc4630;
      color: #fff;
    }

    .van-tree-select__item {
      font-weight: 500;
    }
  }
</style>